<template>
  <div class="container">
     <div class="header">
       <img :src="header_img" class="header_img"/>
       <div class="header_content">
         <span class="content_title">{{title}}</span>
         <span class="content_number">
           {{peopleNumber}} 已参加&nbsp|&nbsp{{cardNumber}} 次打卡
         </span>
       </div>
     </div>
     <div class="navbar">
       <ul>
         <li :class="{select:selectClass.discusSelect}" id="1" @click="tap('discus')"><a>讨论</a></li>
         <li :class="{select:selectClass.detailSelect}"  id="2" @click="tap('detail')"><a>详情</a></li>
         <li :class="{select:selectClass.peopleSelect}"  id="3" @click="tap('people')"><a>成员</a></li>
       </ul>
     </div>
     <div v-if="type=='discus'">
       <discus></discus>
     </div>
     <div v-else-if="type=='detail'">
       <detail></detail>
     </div>
     <div v-else>
       <people></people>
     </div>

     <navigator url="/pages/classSelect/main" hover-class="navigator-hover" class="returnIndex"><img src="http://file.rzkeji.com/web/daka/icon/home2.png"/></navigator>
  </div>
</template>
<script>
import discus from '@/components/discus'
import people from '@/components/people'
import detail from '@/components/detail'
import footer1 from '@/components/footer1'
export default {
  components: {
    people,
    discus,
    detail,
    footer1
  },
  data () {
    return {
      peopleNumber:'',
      cardNumber:'',
      header_img:"",
      title:"",
      type:'discus',
      selectClass:{
        discusSelect:true,
        detailSelect:false,
        peopleSelect:false,
      },
    }
  },
  methods:{
    tap(value){
      this.type=value;
      this.selectClass.discusSelect=this.type=="discus" ? true : false;
      this.selectClass.detailSelect=this.type=="detail" ? true : false;
      this.selectClass.peopleSelect=this.type=="people" ? true : false;
    }
  },
  mounted () {
    var details=this.$store.state.details;
    this.title=details.data.data.title;
    this.header_img=details.data.data.img_url;
    this.peopleNumber=details.data.data.user_count;
    this.cardNumber=details.data.data.daka_count;
  }
}
</script>
<style scoped>
.container{width: 100%;background: #fff;}
.header{width: 100%;height: 105px;background: #3a383f;}
.header_img{width: 32%;height: 80px;display:block;float: left;margin-left: 10px;margin-top: 10px}
.header_content{width: 50%;height: 75px;float: left;margin-left: 20px;margin-top: 12px}
.content_title{width: 100%;height:54px;line-height: 18px;font-size: 16px;color: white;display: block;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;}
.content_number{width: 100%;height: 23px;line-height: 23px;font-size: 12px;color:#aaa;}
.navbar{width: 100%;height: 60px;line-height: 60px;font-size: 20px;color: #999999;border-bottom:1px solid gray;}
.navbar ul{width: 100%;height: 45px;display: flex;justify-content: row;}
.navbar ul li{float: left;width: 33.3%;text-align: center;line-height: 60px;height: 60px;background:  #fff;font-size: 18px}
.navbar ul li.select a{color: #ff7000;border-bottom: 4px solid #ff7000;display: inline;padding-bottom:16px;padding-left: 20px;padding-right: 20px;}
.navigator-hover {color:blue;}
.returnIndex{position: fixed;right: 20px;bottom: 60px;width: 40px;height: 40px;line-height: 30px;}
.returnIndex img{width:40px;height: 40px; }
</style>

